import React, { Component, PureComponent } from 'react'

// PuerComponent的作用: 自动帮我们实现了shouldComponentUpdate,会自动判断所有的state和props数据,如果数据发生变化则更新组件.否则不更新组件
export default class Test extends Component {
  state = {
    msg: 'hello',
    obj: {
      name: 'zs',
    },
  }
  // 控制组件是否继续更新的一个生命周期钩子函数. 返回true,则组件继续更新,返回false则组件停止更新
  shouldComponentUpdate(nextprops, nextState) {
    console.log('新', nextState.obj.name)
    console.log('旧', this.state.obj.name)
    return (
      nextprops.c !== this.props.c ||
      nextState.msg !== this.state.msg ||
      nextState.obj.name !== this.state.obj.name
    )
  }
  render() {
    console.log('test更新了')
    return (
      <div>
        Test,{this.props.c}, {this.state.msg}, {this.state.obj.name}
        <button
          onClick={() => {
            // this.state.obj.name = 'ls'
            // 注意: 即便是不写纯组件,写的shouldComponentUpdate,也应该根据旧的数据,创建新的数据.然后最终将新数据赋值.否则纯组件无法判断复杂数据类型里面的值是否变化,以及shouldComponentUpdate也无法获取到旧的数据,自然也就无法判断
            const newObj = { ...this.state.obj }
            newObj.name = 'ls'
            this.setState({
              //   msg: 'world',
              //   obj: this.state.obj,
              obj: newObj,
            })
          }}
        >
          修改msg
        </button>
      </div>
    )
  }
}
